<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<router-link to="/login/1">登录</router-link>
			<router-link to="/register/2">注册</router-link>
			<router-view></router-view>
		</div>
		
		<!-- 先引入Vue文件再引入路由文件 -->
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../vue-router.min.js"></script>
		<script type="text/javascript">
			
			
			const login = {
				props: ['id', 'name', 'age'],
				template: '<div><h1>登录界面----登录ID为：{{id}}---姓名：{{name}}--年龄：{{age}}</h1></div>'
			}
		
			var router = new VueRouter({
				routes: [
					{
						//重定向
						path: '/',redirect: '/login/:id'
					},
					{
						path: '/login/:id', component: login,
						//使用这样的方式解决
						props: route => ({name: 'lisi', age: 18, id: route.params.id})
					}	
				]
			})
			
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
				router
			})
			
		</script>
	</body>
</html>
